import React, { useState } from 'react';
import './selectitem.less';

interface IProps {
  // 从外面传入的标题
  title: string;
  // 从外面传入的 用来循环生成按钮的数组
  data: ISelectOption[];
  // 当按钮被点击时调用的回调函数
  onChange: (value: string | number) => void;
}

export default function SelectItem({ title, data, onChange }: IProps) {
  // 表示当前是第一个选中的索引
  const [idx, setInx] = useState(0);

  return (
    <div className="sel-opt">
      <h4>{title}</h4>
      <ul>
        {data.map((item, index) => (
          <li
            key={item.value}
            className={index === idx ? 'active' : ''}
            onClick={() => {
              setInx(index);
              onChange(item.value);
            }}
          >
            {item.key}
          </li>
        ))}
      </ul>
    </div>
  );
}
